<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true"> 
        <template v-slot:before>
          <h2>简历投递记录</h2>
        </template>
      </PageTitle>
      <!-- 搜索筛选 -->
      <el-row style="margin-top: 10px">
        <el-col :span="3">
          <el-select
            v-model="value"
            placeholder="公司名称"
            @change="selectChange"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-row :gutter="10" type="flex">
            <el-input
              placeholder="请输入搜索内容"
              v-model="list.keyword"
              @keyup.enter.native="resumeSearch"
            ></el-input>
            <el-button type="primary" @click="resumeSearch">
              <i class="el-icon-search"></i>
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table
        :data="jobApplyListArray"
        ooltip-effect="dark"
        max-height="600px"
        style="margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" fixed /> -->
        <el-table-column
          label="求职者姓名"
          align="center"
          width="100"
          prop="fullname"
          fixed
        />
        <el-table-column
          label="基本信息"
          align="center"
          prop="full_name"
          fixed
          width="300"
        >
          <template slot-scope="scope">
            {{ scope.row.age }} / {{ scope.row.sexCN }} /
            {{ scope.row.educationCN }} / {{ scope.row.experienceCN }}
          </template>
        </el-table-column>
        <el-table-column
          label="职位名称"
          align="center"
          prop="jobname"
          width="130"
          fixed
        />
        <el-table-column
          label="企业名称"
          align="center"
          prop="companyname"
          width="180"
        />
        <el-table-column
          label="投递时间"
          align="center"
          prop="addtime"
          width="180"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            {{ scope.row.addtime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column
          label="是否已查看"
          align="center"
          prop="isLook"
          width="180"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.isLook ? 'success' : 'warning'">{{
              scope.row.isLook ? "已查看" : "未查看"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="处理状态"
          align="center"
          prop="handleStatus"
          width="180"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.handleStatus ? 'success' : 'warning'"
              >{{ scope.row.handleStatus ? "已处理" : "待处理" }}</el-tag
            >
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="投递方式"
          align="center"
          prop="school"
          width="180"
        /> -->
        <el-table-column
          label="来源"
          align="center"
          prop="platformCN"
          width="180"
        />
      </el-table>
      <el-row :gutter="10" style="margin-top: 20px">
        <!-- <el-col :span="8"></el-col> -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="text-align: right"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import { jobApplyListApi } from "@/api/client";

export default {
  data() {
    return {
      // 简历投递记录
      list: {
        page: 1,
        pageSize: 10,
        keyType: 1,
        keyword: "",
      },
      total: "",
      jobApplyListArray: [],
      options: [
        { id: 1, name: "公司名称" },
        { id: 2, name: "公司ID" },
        { id: 3, name: "职位名称" },
        { id: 4, name: "职位ID" },
        { id: 5, name: "求职者姓名" },
      ],
      value: "",
    };
  },
  created() {
    this.jobApplyList();
  },
  methods: {
    // 当选择页码的时候
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.list.pageSize = pageSize;
      this.jobApplyList();
    },
    // 当选择当前页面的时候
    handleCurrentChange(page) {
      console.log(page);
      this.list.page = page;
      this.jobApplyList();
    },
    // 列表渲染
    async jobApplyList() {
      console.log(this.value);
      const res = await jobApplyListApi(this.list);
      console.log(res);
      this.jobApplyListArray = res.records;
      this.total = res.total;
    },
    // 选下拉框选的时候
    selectChange(val) {
      console.log(val);
      this.list.keyType = val;
      this.list.page = 1;
      this.jobApplyList();
    },
    // 搜索
     resumeSearch() {
      this.jobApplyList();
    },
  },
};
</script>

<style scoped></style>
